<template>
  <div>
      <el-row :gutter="24">
          <el-form ref="form" :value="value"  label-width="80px">
            <el-col :span="5">
              <el-form-item label="学科">
                <el-select v-model="form.subjectsID" @change="changeSubID" placeholder="请选择">
                  <el-option v-for="item in arrSubjects" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty" @change="changeDifficulty" placeholder="请选择">
                  <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType" @change="changeQuestionType" placeholder="请选择">
                  <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="标签">
                <el-select v-model="form.tagesID" @change="changeTage" placeholder="请选择">
                  <el-option v-for="item in arrTages" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="省">
                <el-select v-model="form.Provinces" @change="changeProvinces" placeholder="请选择">
                  <el-option v-for="(item,index) in arrProvinces" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="市">
                <el-select v-model="form.city" @change="changeCity" placeholder="请选择">
                  <el-option v-for="(item, index) in arrCity" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="关键字">
                <el-input v-model="form.keyWord" @change="changeKeyword" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="题目备注">
                <el-input v-model="form.titleRemark" @change="changeTitleRemark" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="企业简介">
                <el-input v-model="form.firmIntro" @change="changeFirmIntro" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="方向">
                <el-select v-model="form.direction" @change="changeDirection" placeholder="请选择">
                  <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="录入人">
                <el-input v-model="form.dataEntry" @change="changeDataEntry" placeholder="请输入"></el-input>                
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="二级目录">
                <el-input v-model="form.name" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
      </el-row>
  </div>
</template>
<script>
import {list} from '@/api/hmmm/subjects'
import {list as lists} from '@/api/hmmm/tags.js'
import {difficulty, questionType, direction} from '@/api/hmmm/constants'
import {provinces, citys} from '@/api/hmmm/citys'
export default {
  name: 'questioneSelect',
  data () {
    return {
      form: {
        name: '',
        subjectsID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 题型
        direction: '', // 方向
        tagesID: '', // 标签
        Provinces: null, // 省
        city: '', // 市
        keyWord: '', // 关键字
        titleRemark: '', // 题目备注
        firmIntro: '', // 企业简介
        dataEntry: '' // 录入人
      },
      arrSubjects: [], // 学科列表
      arrTages: [], // 标签列表
      arrProvinces: [], // 城市列表
      arrCity: [] // 市
    }
  },
  props: {
    value: {
      required: true
    }
  },
  computed: {
    // 难度
    difficulty () {
      return difficulty
    },
    // 题型
    questionType () {
      return questionType
    },
    // 方向
    direction () {
      return direction
    }
  },
  created () {
    // 获取学科
    this.gainSubject()
    // 获取标签
    this.gaintags()
    // 获取省份
    this.gainprovinces()
    if (this.form.Provinces) {
      this.gaincitys(this.form.Provinces)
    }
  },
  methods: {
    // 获取学科
    async gainSubject () {
      const data = await list()
      let pagesize = data.data.counts
      const res = await list({ pagesize })
      // console.log(res.data.items)
      this.arrSubjects = res.data.items
    },
    // 下拉菜单-学科
    changeSubID (id) {
      // console.log(id)
      this.form.subjectsID = id
      this.$emit('input', this.form)
    },
    // 下拉菜单-难度
    changeDifficulty (value) {
      // console.log(value)
      this.form.difficulty = value
      this.$emit('input', this.form)
    },
    // 下拉菜单-试题类型
    changeQuestionType (value) {
      // console.log(value)
      this.form.questionType = value
      this.$emit('input', this.form)
    },
    // 下拉菜单-方向
    changeDirection (index) {
      console.log(index)
      this.form.direction = index
      this.$emit('input', this.form)
    },
    // 下拉菜单-标签
    changeTage (id) {
      console.log(id)
      this.form.tagesID = id
      this.$emit('input', this.form)
    },
    // 下拉菜单-省
    changeProvinces (value) {
      // console.log(value)
      this.form.city = ''
      this.form.Provinces = value
      this.$emit('input', this.form)
      if (this.form.Provinces) {
        this.gaincitys(this.form.Provinces)
      }
    },
    // 下拉菜单-市
    changeCity (city) {
      // console.log(city)
      this.form.city = city
      this.$emit('input', this.form)
    },
    // 获取标签
    async gaintags () {
      const res = await lists()
      // console.log(res)
      this.arrTages = res.data.items
    },
    // 获取省份
    async gainprovinces () {
      const res = await provinces()
      // console.log(res)
      this.arrProvinces = res
    },
    // 获取市
    async gaincitys (city) {
      const res = await citys(city)
      // console.log(res)
      this.arrCity = res
    },
    // 关键字
    changeKeyword (key) {
      // console.log(key)
      this.form.keyWord = key
      this.$emit('input', this.form)
    },
    // 题目备注
    changeTitleRemark () {
      // console.log(title)
      this.$emit('input', this.form)
    },
    // 企业简介
    changeFirmIntro () {
      this.$emit('input', this.form)
    },
    // 录入人
    changeDataEntry () {
      this.$emit('input', this.form)
    }
  }
}
</script>
<style scoped>

</style>
